<script lang="ts" setup>
import type { PageRequest, SysClientResponse } from '#/api/kingtown/types';

import { h, onMounted, ref, unref } from 'vue';

import { RestOutlined, SettingOutlined } from '@ant-design/icons-vue';

import { listClientsApi, pageAssetRelationApi } from '#/api/kingtown';

const clients = ref<SysClientResponse[]>([]);
const loading = ref<Boolean>(false);
const params = ref({
  clientId: '',
  assetCode: '',
  epc: '',
});

const pageRequest = ref<PageRequest>({
  current: 0,
  size: 10,
  query: unref(params),
});

const dataSource = ref([
  {
    id: '123456',
    clientName: '香奈儿',
    assetCode: 'CN-12345678',
    epc: 'FF0020250418',
  },
  {
    id: '123457',
    clientName: '香奈儿',
    assetCode: 'CN-12345679',
    epc: 'FF0020250419',
  },
]);
const columns = ref([
  {
    title: '所属客户',
    dataIndex: 'clientName',
    key: 'clientName',
    width: 120,
    align: 'center',
  },
  {
    title: '资产编码',
    dataIndex: 'assetCode',
    key: 'assetCode',
    width: 120,
    align: 'center',
  },

  {
    title: 'RFID编码',
    dataIndex: 'epc',
    key: 'epc',
    width: 120,
    align: 'center',
  },
]);

onMounted(() => {
  console.warn('onMounted');
  fetchClients();
  reload();
});

const fetchData = async () => {
  loading.value = true;
  const result = await pageAssetRelationApi(pageRequest.value);
  loading.value = false;
  dataSource.value = result.records;
  console.log('pageAssetApi', result);
};

const fetchClients = async () => {
  clients.value = await listClientsApi();
  if (clients.value.length > 0) {
    params.value.clientId = clients.value[0]?.id || '';
  }
};

const reload = async () => {
  pageRequest.value.current = 1;
  await fetchData();
};
</script>
<template>
  <div class="page-wrap">
    <div class="action-wrap">
      <a-space class="button-wrap">
        <a-button type="primary">导入</a-button>
        <a-button type="default">导入模板</a-button>
      </a-space>
      <a-space class="search-wrap">
        <span>所属客户</span>
        <a-select v-model:value="params.clientId" style="width: 120px">
          <a-select-option value="">全部</a-select-option>
          <a-select-option
            v-for="client in clients"
            :value="client.id"
            :key="client.id"
          >
            {{ client.clientName }}
          </a-select-option>
        </a-select>
        资产编码
        <a-input style="width: 120px" v-model:value="params.assetCode" />
        RFID编码
        <a-input style="width: 120px" v-model:value="params.epc" />
        <a-button type="primary" @click="reload">搜索</a-button>
      </a-space>
    </div>
    <div class="content-wrap">
      <a-table :data-source="dataSource" :columns="columns" :loading="loading">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column?.key === 'status'">
            <a-tag v-if="record.status === '0'" color="orange">
              未开始/进行中
            </a-tag>
            <a-tag v-else color="blue">已完成</a-tag>
          </template>
          <template v-if="column?.key === 'operation'">
            <div>
              <a-button
                class="button-interval"
                type="link"
                size="small"
                :icon="h(SettingOutlined)"
                @click="showModal(record)"
              >
                配置
              </a-button>
              <a-button
                class="button-interval"
                type="link"
                size="small"
                :icon="h(RestOutlined)"
                @click="handleDelete(record)"
              >
                删除
              </a-button>
            </div>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<style scoped></style>
